<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>错词重新测试</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
</head>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal">

        <el-menu-item @click="navigateHome">首页</el-menu-item>
        <el-menu-item @click="navigateToErrors">返回错词列表</el-menu-item>
        <el-menu-item @click="navigateToSelectChapter">重新选择章节</el-menu-item>
    </el-menu>

    <div style="padding: 20px;">
        <el-button type="primary" @click="startTest">开始测试</el-button>

        <el-table :data="errorWords" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="word" label="单词" align="center"></el-table-column>
            <el-table-column label="填写框" align="center">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.userAnswer"></el-input>
                </template>
            </el-table-column>
        </el-table>

        <el-button type="success" @click="submitTest" style="margin-top: 20px;">提交测试</el-button>
    </div>
</div>

<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            errorWords: []
        },
        created() {
            this.errorWords = JSON.parse(sessionStorage.getItem('errorWordsTest')) || [];
        },
        methods: {
            navigateHome() {
                window.location.href = '../index.html';
            },
            navigateToSelectChapter() {
                window.location.href = 'error-test-select.html';
            },
            navigateToErrors() {
                window.location.href = 'error-words.html';
            },
            startTest() {
                // 播放单词测试音频等功能
            },
            submitTest() {
                axios.post('/wanglu/test/submit', {
                    chapter: '错词重新测试',
                    answers: this.errorWords.map(word => ({
                        wordId: word.id,
                        userAnswer: word.userAnswer || ""
                    }))
                }).then(res => {
                    // 显示测试结果
                    sessionStorage.setItem('testResults', JSON.stringify(res.data.data));
                    window.location.href = 'test-result.html';
                }).catch(error => {
                    console.error('提交测试失败: ', error);
                });
            }
        }
    });
</script>
</body>
</html>